<template>
<div>
  <mouth-report v-if="allShow"/>
  <management-report v-else/>
  <van-tabbar v-model="active" @change="getMouth" v-if="mouthShow">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="chart-trending-o" >进度表</van-tabbar-item>
  </van-tabbar>
</div>
</template>

<script>
import managementReport from '@/components/mouth-report/schedule'
import mouthReport from '@/components/mouth-report/home'
export default {
  components: {
    managementReport,
    mouthReport
  },
  name: 'index',
  data () {
    return {
      active: 0,
      allShow: true,
      mouthShow: true
    }
  },
  mounted () {
    // this.getRole()
  },
  methods: {
    getRole () {
      let role = window.localStorage.getItem('userinfo') ? JSON.parse(window.localStorage.getItem('userinfo')) : []
      if (role.is_super !== 1) {
        this.mouthShow = false
      } else {
        this.mouthShow = true
      }
    },
    // // 显示经营月报组件
    getMouth (index) {
      index === 0 ? this.allShow = true : this.allShow = false
    }
  }
}
</script>
<style>
  .van-checkbox {
    margin-top: 5px;
    width:25% !important;
    display: inline-block !important;
  }
  .van-tab span {
    font-size: 14px;
    margin:0 10px;
  }
  .van-checkbox__icon {
    display: inline-block !important;
  }
  .van-tab--active {
    color: #409EFF;
  }
  .van-checkbox__label {
    margin-left: 0;
    margin-top: 2px;
    vertical-align: top;
    color: #8b8b8b;
  }
  .van-tabs__line {
    background-color:#409EFF !important;
  }
</style>
<style scoped>
  .van-nav-bar__title {
    color: #ffffff;
  }
</style>
